feat: improve Landing page hero section#104
Conversation
|
Someone is attempting to deploy a commit to the csxark's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThis PR enhances the landing page hero section: adds a CSS keyframe animation applied to the hero background, inserts Analytics markup, adds a new feature highlight card grid, reformats the categories grid, adds a Footer component, updates the docs link to an internal route, and centers the typewriter text. ChangesLanding Page Hero Section Improvements
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested labels: `ECSoC26`, `good-ui`, `ECSoC26-L1` Suggested reviewers: `csxark` 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@csxark Please review this pull request! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
app/page.tsx (1)
118-118: 🩺 Stability & Availability | 🔵 TrivialMove
Analyticstoapp/layout.tsx. Mounted inapp/page.tsx, it only tracks this page; the root layout is the right place for site-wide coverage.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/page.tsx` at line 118, The Analytics component is mounted in the page component, so it only tracks that route instead of the whole site. Move the Analytics usage from the app/page.tsx page component into the root app/layout.tsx so it is loaded once for all routes, and remove it from the page-level render.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/globals.css`:
- Around line 28-41: Rename the animation keyframes in globals.css from
heroFloat to hero-float to match the Stylelint keyframes-name-pattern rule.
Update both the `@keyframes` declaration and the animation reference in
.animate-hero-float so they use the same kebab-case name.
In `@app/page.tsx`:
- Around line 178-199: The feature card headings use only the dark-mode teal
style, so they need a light-mode variant for contrast. Update the heading
classes in the three card blocks within the page component to follow the same
light/dark pattern used by the category icons, using the existing heading
elements under the interactive, secure, and learn sections. Keep the current
dark theme styling while adding a stronger teal for light mode.
- Around line 169-171: The `/docs` CTA in the page component is still using a
plain anchor with new-tab attributes, which skips Next.js routing. Update the
element in the same spot where the other CTA uses `Link` so it uses Next.js
`<Link>` for the internal `/docs` route, and remove `target="_blank"` and
`rel="noreferrer"` since this is same-origin navigation.
---
Nitpick comments:
In `@app/page.tsx`:
- Line 118: The Analytics component is mounted in the page component, so it only
tracks that route instead of the whole site. Move the Analytics usage from the
app/page.tsx page component into the root app/layout.tsx so it is loaded once
for all routes, and remove it from the page-level render.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: f4dfa404-c8c3-4505-9b9f-95fc8f40db16
📒 Files selected for processing (3)
app/globals.cssapp/page.tsxcomponents/layout/typewriter.tsx
| @keyframes heroFloat { | ||
| 0%,100% { | ||
| transform: translateY(0px); | ||
| } | ||
|
|
||
| 50% { | ||
| transform: translateY(-12px); | ||
| } | ||
| } | ||
|
|
||
| .animate-hero-float { | ||
| animation: heroFloat 8s ease-in-out infinite; | ||
| } | ||
|
|
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Rename heroFloat to kebab-case to satisfy Stylelint.
Stylelint reports keyframes-name-pattern violation: heroFloat should be hero-float. Update the keyframes name and the class reference accordingly.
♻️ Proposed fix
-@keyframes heroFloat {
+@keyframes hero-float {
0%,100% {
transform: translateY(0px);
}
50% {
transform: translateY(-12px);
}
}
.animate-hero-float {
- animation: heroFloat 8s ease-in-out infinite;
+ animation: hero-float 8s ease-in-out infinite;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @keyframes heroFloat { | |
| 0%,100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-12px); | |
| } | |
| } | |
| .animate-hero-float { | |
| animation: heroFloat 8s ease-in-out infinite; | |
| } | |
| `@keyframes` hero-float { | |
| 0%,100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-12px); | |
| } | |
| } | |
| .animate-hero-float { | |
| animation: hero-float 8s ease-in-out infinite; | |
| } |
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 28-28: Expected keyframe name "heroFloat" to be kebab-case (keyframes-name-pattern)
(keyframes-name-pattern)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/globals.css` around lines 28 - 41, Rename the animation keyframes in
globals.css from heroFloat to hero-float to match the Stylelint
keyframes-name-pattern rule. Update both the `@keyframes` declaration and the
animation reference in .animate-hero-float so they use the same kebab-case name.
Source: Linters/SAST tools
| href="/docs" | ||
| target="_blank" | ||
| rel="noreferrer" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Use <Link> instead of <a> for the internal /docs route.
The href was changed from an external URL to the internal /docs route, but the element is still a plain <a> tag with target="_blank" and rel="noreferrer". This bypasses Next.js client-side navigation (no prefetching, full page reload). The other CTA button correctly uses <Link>. Additionally, target="_blank" opens an internal page in a new tab and rel="noreferrer" is unnecessary for same-origin links.
🔧 Proposed fix
- <a
- href="/docs"
- target="_blank"
- rel="noreferrer"
+ <Link
+ href="/docs"
className="rounded-lg border border-zinc-200 bg-white px-6 py-3 text-sm font-semibold text-zinc-800 shadow-sm transition-all hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800 hover:scale-[1.02]"
>
View Documentation
- </a>
+ </Link>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| href="/docs" | |
| target="_blank" | |
| rel="noreferrer" | |
| <Link | |
| href="/docs" | |
| className="rounded-lg border border-zinc-200 bg-white px-6 py-3 text-sm font-semibold text-zinc-800 shadow-sm transition-all hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800 hover:scale-[1.02]" | |
| > | |
| View Documentation | |
| </Link> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/page.tsx` around lines 169 - 171, The `/docs` CTA in the page component
is still using a plain anchor with new-tab attributes, which skips Next.js
routing. Update the element in the same spot where the other CTA uses `Link` so
it uses Next.js `<Link>` for the internal `/docs` route, and remove
`target="_blank"` and `rel="noreferrer"` since this is same-origin navigation.
| <div className="mt-10 mx-auto grid max-w-3xl grid-cols-1 gap-4 text-center sm:grid-cols-3"> | ||
| <div> | ||
| <h3 className="text-lg font-semibold text-teal-400">⚡ Interactive</h3> | ||
| <p className="text-sm text-zinc-800 dark:text-zinc-400"> | ||
| Live cryptography playground | ||
| </p> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h3 className="text-lg font-semibold text-teal-400">🔐 Secure</h3> | ||
| <p className="text-sm text-zinc-800 dark:text-zinc-400"> | ||
| Explore modern cryptographic algorithms | ||
| </p> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h3 className="text-lg font-semibold text-teal-400">📚 Learn</h3> | ||
| <p className="text-sm text-zinc-800 dark:text-zinc-400"> | ||
| Interactive documentation and resources | ||
| </p> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Feature card headings lack a light-mode color variant.
All three headings use text-teal-400, which is a light teal suited for dark backgrounds. In light mode, this has poor contrast against the white page background. The category card icons elsewhere in this file use the text-teal-600 dark:text-teal-400 pattern for proper light/dark adaptation.
🎨 Proposed fix
- <h3 className="text-lg font-semibold text-teal-400">⚡ Interactive</h3>
+ <h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">⚡ Interactive</h3>- <h3 className="text-lg font-semibold text-teal-400">🔐 Secure</h3>
+ <h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">🔐 Secure</h3>- <h3 className="text-lg font-semibold text-teal-400">📚 Learn</h3>
+ <h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">📚 Learn</h3>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="mt-10 mx-auto grid max-w-3xl grid-cols-1 gap-4 text-center sm:grid-cols-3"> | |
| <div> | |
| <h3 className="text-lg font-semibold text-teal-400">⚡ Interactive</h3> | |
| <p className="text-sm text-zinc-800 dark:text-zinc-400"> | |
| Live cryptography playground | |
| </p> | |
| </div> | |
| <div> | |
| <h3 className="text-lg font-semibold text-teal-400">🔐 Secure</h3> | |
| <p className="text-sm text-zinc-800 dark:text-zinc-400"> | |
| Explore modern cryptographic algorithms | |
| </p> | |
| </div> | |
| <div> | |
| <h3 className="text-lg font-semibold text-teal-400">📚 Learn</h3> | |
| <p className="text-sm text-zinc-800 dark:text-zinc-400"> | |
| Interactive documentation and resources | |
| </p> | |
| </div> | |
| </div> | |
| <div className="mt-10 mx-auto grid max-w-3xl grid-cols-1 gap-4 text-center sm:grid-cols-3"> | |
| <div> | |
| <h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">⚡ Interactive</h3> | |
| <p className="text-sm text-zinc-800 dark:text-zinc-400"> | |
| Live cryptography playground | |
| </p> | |
| </div> | |
| <div> | |
| <h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">🔐 Secure</h3> | |
| <p className="text-sm text-zinc-800 dark:text-zinc-400"> | |
| Explore modern cryptographic algorithms | |
| </p> | |
| </div> | |
| <div> | |
| <h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">📚 Learn</h3> | |
| <p className="text-sm text-zinc-800 dark:text-zinc-400"> | |
| Interactive documentation and resources | |
| </p> | |
| </div> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/page.tsx` around lines 178 - 199, The feature card headings use only the
dark-mode teal style, so they need a light-mode variant for contrast. Update the
heading classes in the three card blocks within the page component to follow the
same light/dark pattern used by the category icons, using the existing heading
elements under the interactive, secure, and learn sections. Keep the current
dark theme styling while adding a stronger teal for light mode.
csxark
changed the title
|
Hi @Vishvapatel2047, well, I would like to have a new hero section UI. As per the issue below are some references for the hero section design. I want these kinda 3D and minimal Hero section UI. https://dribbble.com/shots/26210435-Budbo-3D-landing-page-hero-section-coin-icons This is my taste for the UI. |
2 participants
Overview
This PR enhances the landing page hero section by improving usability, responsiveness, and the overall visual experience.
Changes Made
/docspage instead of an external GitHub URL.Testing
Screenshots
Before:
After:
Text is centralized
CTA buttons added
Related Issue
Closes #86
Summary by CodeRabbit